    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>凹凸效果加阴影</title>
        <style>
            .box1{
                   width: 400px;
                   height: 400px;
                   border: 1px solid #aa5a07;
                    /*background-color: #29aa20;*/
                background-color: rgba(29, 99, 31, 0.38);

                margin: 100px auto;
               }
            .box2{
                width: 200px;
                height: 200px;
                border: 1px solid #aa5a07;
                /*background-color: #aa5f85;*/
                margin: 100px 100px;
                background-color: hsla(240,100%,76%,0.9);
            }
            body{
                background-color: #666666;
            }
            .p1{
                font-size:100px;
                font-family:"Microsoft YaHei UI";
                font-weight: bold;
                text-align: center;
                text-shadow: 5px 7px 2px orangered;
            }
            .p2{
                font-size:100px;
                font-family:"Microsoft YaHei UI";
                font-weight: bold;
                text-align: center;
                color: #666666;
                text-shadow: -1px -1px 1px #cccccc,1px 1px 1px #333333;
            }
            .p3{
                font-size:100px;
                font-family:"Microsoft YaHei UI";
                font-weight: bold;
                text-align: center;
                color: #666666;
                text-shadow: -1px -1px 1px #333333,1px 1px 1px #cccccc;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        1
        <div class="box2">2</div>
    </div>

    <p class="p1">我爱你亲爱的中国</p>
    <p class="p2">我爱你美丽的黄河</p>
    <p class="p3">我爱你雄伟的长城</p>
    </body>
    </html>